<template>
	<view>
		<view class="box-one">
			<view class="box-top">
				<view class="box-top-one">
					2980 3887 7199 2734 782
				</view>
				<view class="box-top-two">
					挂号时间：2022年2月18日 04:12:00
				</view>
			</view>
			<view class="box-centent">
				<view class="">
					卫生所: 卫生所A
				</view>
				<view class="">
					科室: 内分泌科
				</view>
				<view class="">
					时间: 2019-12-20 (周一) 上午 8:00-10:00
				</view>
				<view class="">
					就诊人: 王天天
				</view>
				<view class="">
					病例简介: 腹痛胃胀,难以入睡
				</view>
			</view>
			<view style="display: flex;" class="box-lower">
				<view style="display: flex;" class="">
					<view class="">
						挂号费:
					</view>
					<view style="color: red;">
						 ￥0
					</view>
				</view>
				<view  style="display: flex;"class="box-lowers">
					<view class="">
						取消预约
					</view>
					<view style="background-color: #3F76EE;color: #f8f8f8;" class="">
						待就诊
					</view>
				</view>
			</view>
		</view>
		<view style="position: absolute;top: 1100rpx;
		width: 90%; margin-left: 30rpx;
		">
			<button style="background-color: #3F76EE;color: white;border-radius: 30rpx;">预约就诊</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.box-one {
		width: 90%;
		height: 600rpx;

		margin-left: 35rpx;
		margin-top: 30rpx;
		border-radius: 10rpx;
		box-shadow:0 0 8px #DDD;
	}

	.box-top {
		width: 100%;
		height: 120rpx;
		background-color: #3F76EE;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
	}

	.box-top-one {
		color: aliceblue;
		padding-left: 20rpx;
		padding-top: 20rpx;
		font-size: 28rpx;
		word-spacing: 5rpx;
		letter-spacing: 2rpx;
	}

	.box-top-two {
		color: #f8f8f8;
		font-size: 20rpx;
		padding-left: 20rpx;
		padding-top: 8rpx;
		word-spacing: 15rpx;

	}

	.box-centent {
		border-bottom: 1rpx solid #ccc;
		height: 350rpx;
		width: 93%;
		margin-left: 20rpx;
		/* border: 1rpx solid #ccc; */
		margin-top: 10rpx;
		color: #b4b4b4;
	}

	.box-centent view {
		padding-top: 29rpx;
		font-size: 25rpx;
		word-spacing: 10rpx;
	}
	.box-lower{
		margin-top: 30rpx;
		justify-content: space-between;
		padding-left: 25rpx;
		padding-right: 25rpx;
		font-size: 28rpx;
		color: #b4b4b4;
		word-spacing: 5rpx;
	}
	.box-lowers view{
		border: 1rpx solid #ccc;
		padding: 13rpx;
		margin-left: 13rpx;
		margin-top: -5rpx;
		border-radius: 10rpx;
	}
</style>
